<template>
	<view class="content">
		<page-meta>
		    <navigation-bar
		      :title="nbTitle"
		      :title-icon="titleIcon"
		      :title-icon-radius="titleIconRadius"
		      :subtitle-text="subtitleText"
		      :subtitle-color="nbFrontColor"
		      :loading="nbLoading"
		      :front-color="nbFrontColor"
		      :background-color="nbBackgroundColor"
		      :color-animation-duration="2000"
		      color-animation-timing-func="easeIn"
		    />
		</page-meta> 
		
		<view>
			<view class="gatewayView"> 
				<view>
					<view class="Pview" >
						<text>
							功率：{{ power }}  kw
						</text>
						
					</view>
				</view>
			 	<view class="lineView" v-if="normalLine"> 
			 		<u-row gutter="16">
			 			<u-col span="6">
			 				<view class="">
			 					电压：{{ voltage }}   V
			 				</view>
			 			</u-col>
			 			<u-col span="6" >
			 				<view class="bRight">
			 					电流：{{ current }}  A 
			 				</view>
			 			</u-col>
						
			 		</u-row> 
					<u-row gutter="16">
						<u-col span="6" >
							<view >
								温度：{{ temp }}  ℃
							</view>
						</u-col>
						<u-col span="6" >
							<view class="bRight">
								状态：{{ LineStatus }} 
							</view>
						</u-col>
						 
					</u-row>
			 	</view>
				 
				 <view  class="lineView" v-if="threePhase">
					 <u-row gutter="16">
					 	<u-col span="6">
					 		<view class="">
					 			A相电压：{{ VA }}  V
					 		</view>
					 	</u-col>
					 	<u-col span="6" >
					 		<view class="bRight">
					 			B相电压：{{ VB }}  V
					 		</view>
					 	</u-col>
					
					</u-row> 
					
					<u-row gutter="16">
						<u-col span="6" >
							<view>
								C相电压：{{ VC }}  V
							</view>
						</u-col>
						<u-col span="6" >
							<view class="bRight">
								状态：{{ LineStatus }}  
							</view>
						</u-col>
					</u-row>  
					 <u-row gutter="16">
					 	<u-col span="6">
					 		<view class="">
					 			温度：{{ temp }}  ℃
					 		</view>
					 	</u-col>
					 	<u-col span="6" >
					 		<view class="bRight">
					 			电流：{{ current }}  A
					 		</view>
					 	</u-col>
					 </u-row>  
				 </view>
			</view>
			 
			<view>
				<u-cell-group>
					<u-cell-item  title="线路名称" v-model="lineName" @click="getLineData()"></u-cell-item>
					<u-cell-item  title="线路号" :arrow="false" v-model="lineNo"></u-cell-item>
					<u-cell-item  title="设备类型" :arrow="false" v-model="etype"></u-cell-item>
					<u-cell-item  title="联网方式" :arrow="false" v-model="lan" ></u-cell-item>
					<u-cell-item  title="开关状态" :arrow="false">
						<u-switch v-model="status" @change="switchOff"></u-switch>
					</u-cell-item> 
					<u-cell-item  title="过欠压" v-model="underV" @click="setV"></u-cell-item>
					<u-cell-item  title="过流" v-model="underA" @click="setA"></u-cell-item>
				</u-cell-group>
			</view>
			<view >
				<u-popup v-model="setVA" mode="center" border-radius="14"  length="70%">
					<view class="setV">
						<view><text>设置过压值</text></view>
						<view class="overValue"> 
							<u-input border v-model="cunderV"  type="number"/> 
						</view>
						
					</view>
					<view class="cheoseView">
						<u-button size="medium"  type="defaut" :ripple="true" shape="square" @click="closeView">取消</u-button>
						<u-button size="medium" type="primary" :ripple="true"  shape="square" @click="sureChanegeV">确认更改</u-button>
					</view>
				</u-popup>
			</view>
	
		</view>
		  
		 
	</view>
</template>

<script>
	export default {
		// 在 页面接受参数
		onLoad: function (option) {
			console.log(option.lineNO,111);
			this.lineNo = option.lineNO;
			this.lineName = "线路"+ option.lineNO
			
		},
		data() {
			return {
				//  
				mobile: '',
				code: '',
				list:'',
				nbTitle: '线路详情',
				titleIcon: '/static/logo.png',
				titleIconRadius: '20px',
				subtitleText: 'subtitleText',
				nbLoading: false,
				nbFrontColor: '#000000',
				nbBackgroundColor: '#ffffff', 
				
				
				
				LineStatus:"在线",
				src:"https://www.jalasmart.com/uploads/allimg/190820/1-1ZR0144310.png",
				
				lineName:"线路一", 
				lineNo:"",
				lan:"wifi",
				etype:"1P_R",
				status:true,
				underV:"280",
				underA:"60",
				false:false,
				
				normalLine:true,
				threePhase:false,
					
				data:[
					{power:1},
					{PowerA:122} 
				],
				voltage:"224",
				current:"10",
				temp:"38",
				power:"1256",
				VA:"220",
				VB:"221",
				VC:"222",
				cunderV:"",
				setVA:false,
				
			}
		},
		
		methods: {
			getLineData(){
				console.log('请求数据，如果数据中有A相B相C相 则threePhase为 true'); 
				if(this.data.PowerA!=''){
					this.threePhase = true;
					this.normalLine = false;
					console.log(this.VA,'ABC');
				}else{
					this.normalLine = true;
					this.threePhase = false;
					
					console.log(this.power,'电压功率');
				} 
			},
			
			
			setV(){
				console.log("设置过欠压值");
				this.cunderV = this.underV;
				this.setVA = true;
			},
			closeView(){
				console.log("12345")
				this.setVA = false;
			},
			sureChanegeV(){
				// 请求接口更改值
				// if(){
				// 	// success
				// }
				
				this.underV = this.cunderV;
				this.setVA = false;
			},
			
			setA(){
				console.log("设置过流值");
			},
			
			
			switchOff(){ 
				console.log("请求接口 打开或者关闭开关"); 
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	} 
	
	.gatewayView{
		width: 100%;  
		padding: 20px;
	}
	.lineView{
		width: 100%;
		padding: 20px;
		text-align: center; 
		// color: white;
	}
	.u-row {
		margin: 10rpx 0;
	}
	 .Pview{
		 text-align: center;
	 }
	.bRight{ 
		text-align: center;
	}
	.setV{
		padding: 20rpx;
		text-align: center;
	}
	.overValue{
		margin: 30rpx;
	}
	.cheoseView{
		padding:0 10%;
	}
	.cheoseView>button{
		width: 35%;
		margin-left:30rpx;
		margin-bottom: 30rpx;
	}
	
</style>
